<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="./login.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <div class="zbox">
            <div class="xbox">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>
            <div class="rightbox">
                <div class="rbox">
                    <div class="zt3">{{hy}}</div>
                    <div class="dlzt">{{dl}}</div>
                    <div class="lk" >
                        <div class="dl" @click="login">{{dll}}</div>
                    </div>
                </div>
            </div>


        </div>
        <div class="xxk">
            <div class="zt4">{{yhm}}</div> 
            <input class="kk" name="name"/>
            <img src="../image/user.png" class="tp">
            
        </div>
        <div class="xxk" style="position: absolute;top:380px;">       
            <div class="zt4">{{mm}}</div>
            <input class="kk"/>
            <img src="../image/mm.png" class="tp">
        </div>
        <div class="zt">{{zt}}</div>
        <div class="zt1">{{zt1}}</div>
        <div class="zt2">{{zt2}}</div>  
        <div class="dbbox">
            <div class="dbzt">{{db}}</div>
            <div class="jz">{{jz}}</div>
            <div class="xjz">{{jz}}</div>
        </div>
    </div>
</body>
</html>
<script>
    var vm = new Vue ({
        el:'#app',
        data:{
            a:1,
            zt: '双线质量管控体',
            zt1: '力求每件产品、每个细节都尽善尽美',
            zt2: '够专业 才放心',
            hy:'欢迎光临',
            dl:'系统登录',
            yhm:'用户名',
            mm:'密  码',
            dll:'登录',
            db:'All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号',
            jz:'ORDER聚造',
            userName:'',
        },
    methods:{
        click(){
            this.a = this.a + 1
        },
        login(){
        console.log(this.userName)
    },
    },
   
    created(){
        console.log('数据已经准备好了')
    },
    mounted(){
        console.log('HTML元素渲染完成')
    }
    })

</script>